<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="../stylesheets/login.css">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
</head>

<body>
    <div class="page-wrap">
        <div class="w">
            <div class="user-con">
                <div class="user-title">用户登录</div>
                <div class="user-box">
                    <div class="error-item">
                        <i class="fa fa-facebook"></i>
                        <p class="err-msg">Error</p>
                    </div>
                    <form class="" action="/users/login" method="post">
                        <div class="user-item">
                            <label class="user-label" for="">
                                <i class="fa fa-user"></i>
                            </label>
                            <input class="user-content" data-login id="loginname" name="loginname" placeholder="请输入用户名" autocomplete="off">
                        </div>
                        <div class="user-item">
                            <label class="user-label" for="password">
                                <i class="fa fa-lock"></i>
                            </label>
                            <input type="password" data-pass class="user-content" id="password" name="password" placeholder="请输入密码" autocomplete="off">
                        </div>

                        <div class="user-item">
                            <span data-first>
                                <%= firstnum %>
                            </span> +
                            <span data-second>
                                <%=secondnum%>
                            </span> =
                            <input type="text" data-num class="" autocomplete="off" name="vnum">
                        </div>
                        <!-- <a class="btn btn-submit" id="submit">登录</a> -->
                        <input class="btn btn-submit" type="submit" name="" value="登录">
                    </form>

                    <div class="link-item">
                        <a class="link" href="/users/logout" target="_blank">退出账号</a>
                        <a class="link" href="/register" target="_blank">免费注册</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

<script type="text/javascript">
    const form = document.querySelector("form");
    const login = form.querySelector("[data-login]");
    const pass = form.querySelector("[data-pass]");
    const num = form.querySelector("[data-num]");
    const first = form.querySelector("[data-first]");
    const second = form.querySelector("[data-second]");
    form.onsubmit = function(event) {
        event.preventDefault();
        let loginname = login.value;
        let password = pass.value;
        let vnum = num.value;
        let firstnum = first.innerText;
        let secondnum = second.innerText;
        fetch("/login", {
                method: "POST",
                credentials: 'include',
                body: JSON.stringify({
                    loginname,
                    password,
                    vnum,
                    firstnum,
                    secondnum
                }),
                headers: {
                    "Content-Type": "application/json"
                }
            })
            .then(res => res.text())
            .then(error => {
                if (error) {
                    error = JSON.parse(error);
                    if (error.str && error.str != "登录成功") {
                        alert(error.str)
                    } else if (error.str && error.str == "登录成功") {
                        alert("登录成功")
                        window.location.href = "/?loginname=" + error.user.userName;
                    }
                }
            })
    };
</script>

</html>